<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!--    引入首页样式-->
    <link rel="stylesheet" type="text/css" href="indexCss.css">
    <style>
        .img1 { /*前脸背景*/
            z-index: 2;
            height: 400px;
            width: 100%;
            background-image: url("http://www.sinoiov.com/skin/new/img/banner_news.png"); /*把前脸地址放这*/
        }
    </style>
</head>
<body>
<!--动态背景画布-->
<canvas id="canvas"></canvas>
<header class="container navbar-fixed-top ">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="http://www.sinoiov.com/skin/new/img/logo.png">
                </a>
            </div>
            <!--分类开始-->
            <ul class="nav navbar-nav">
                <li><a href="mall.html">首页</a></li>
                <li><a href="">行业咨询</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">大卡商城</a></li>
                <li style="display: block;float: right">
                    <form action="">
                        <input type="text" placeholder="Search">
                        <button>
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </li>
            </ul>
            <!--分类结束-->
            <ul class="nav navbar-nav navbar-right">
                <li style="display: block;float: right"><a class="fa fa-user-o" href="/login.html">管理员入口</a></li>
            </ul>
        </div>
    </nav>
</header>


<!--正文前脸图片-->
<div class="container ">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div id="d1">
                <div class="col-md-12 column img1">
                    <!--设置前脸图片去上边找id--》》img1--  -->
                </div>
            </div>
        </div>
    </div>
</div>


<!--框架4-4-4分布式正文，可以按12拆开，，放内容-->
<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
            <!--在这放内容-->
        </div>
        <div class="col-md-4 column">
            <!--在这放内容-->
        </div>
        <div class="col-md-4 column">
            <!--在这放内容-->
        </div>
    </div>


    <footer class="footer "><!--navbar-fixed-bottom-->
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="col-md-12 column" id="bot">
                    <div class="row clearfix">
                        <div class="col-md-4 column">
                            <img id="bot_img" src="http://www.sinoiov.com/skin/new/img/logo_white.png"/>
                        </div>
                        <div class="col-md-4 column">
                            <ol class="olcl">
                                <li class="li1">新闻中心</li>
                                <li><a href="">行业动态</a></li>
                                <li><a href="">公司快讯</a></li>
                            </ol>
                        </div>
                        <div class="col-md-4 column">
                            <ul class="olcl">
                                <li class="li1">人才资源</li>
                                <li><a href="">岗位招聘</a></li>
                                <li><a href="">内部推荐</a></li>
                            </ul>
                        </div>
                    </div>
                    <hr>
                    <div class="row clearfix">
                        <div class="col-md-8 column">
                            <address><strong>联系我们</strong><br/> 电话: 400-096-6666&nbsp;&nbsp;&nbsp;&nbsp;传真:
                                010-50822800<br/> <span
                                        class="ph">市场及媒体合作：marketing-team@sinoiov.com</span><span class="fax">投融资合作：ir@sinoiov.com</span><br/>
                                <abbr title="公司地址">地址:</abbr> 北京市海淀区东北旺西路8号&nbsp;中关村软件园27号楼千方科技大厦（100085）
                            </address>
                        </div>
                        <div class="col-md-4 column">
                            <h4>
                                <b>关注我们</b>
                            </h4>
                            <a class="social weixin"><i class="fa fa-weixin" aria-hidden="true"><img
                                    class="qrcode" src="liufei.jpg" alt="微信二维码"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="social weixin"><i class="fa fa-weibo" aria-hidden="true"><img
                                    class="qrcode" src="liyk.jpg" alt="微信二维码"></i></a>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-md-12 column" style="background-color: rgb(6 67 126);">
                            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023119"
                               target="_blank">
                                <img src="http://www.sinoiov.com/skin/new/img/icon_beian.png"
                                     style="vertical-align: middle;margin-top: -4px;margin-right: 5px;display: inline-block;">
                                公网安备 11010802023119号
                            </a>
                            <span>版权所有：中交兴路®</span>
                            <a href="https://beian.miit.gov.cn" target="_blank">京ICP备12002390号</a>
                            <span class="split">&nbsp;|&nbsp;</span>
                            <span>增值电信业务许可证</span>
                            <a href="https://tsm.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%E5%90%88%E5%AD%97B2-20200100&amp;type=xuke"
                               target="_blank">
                                合字B2-20200100
                            </a>
                            <a href="https://tsm.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%E5%90%88%E5%AD%97B2-20200061&amp;type=xuke"
                               target="_blank">
                                合字B2-20200061
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入瀑布流相关js文件-->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>


<!--引入动态背景js文件-->
<script src="bgjs2.js"></script>
</body>
</html>